<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>个人简历</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="js/jquery.min.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script src="./js/index.js"></script>
    <!--<script src="font-awesome-4.6.3/css/font-awesome.min.css"></script>-->
</head>
<body>
<!-- 音乐 -->
<div class="mic">
    <div class="on">
    </div>
    <audio class="music" src="mic/mic.mp3" autoplay  loop></audio>
</div>

<!-- Swiper -->
<div class="swiper-container main">
    <div class="swiper-wrapper">
        <!--第一屏-->
        <div class="swiper-slide slide1">
            <!--loding-->
            <div class="box-loding">
                <div class="my">
                    <img src="images/my.jpg" alt=""/>
                </div>
                <div class="loding">
                    <div class="point1">l</div>
                    <div class="point2">o</div>
                    <div class="point3">d</div>
                    <div class="point4">i</div>
                    <div class="point5">n</div>
                    <div class="point6">g</div>
                    <div class="point7">.</div>
                    <div class="point8">.</div>
                    <div class="point9">.</div>
                </div>
            </div>
            <!--内容-->
            <div class="content">
                <div class="job">HTML5前端工程师</div>
                <div class="name">张程</div>
                <div class="tell">电话：15556132587</div>
                <div class="QQ">QQ：1065172634</div>
                <div class="address">现居地：上海</div>
            </div>
        </div>
        <!-- 第二屏-->
        <div class="swiper-slide slide2">
            <span>个</span>
            <span>人</span>
            <span>经</span>
            <span>历</span>
            <div class="message1">2010年被淮北师范大学录取，就读计算机科学与技术</div>
            <div class="message2">2014年就业于安徽金蟾有限公司，任职WEB前端</div>
            <div class="message3">现已离职，可随时上岗</div>
            <div class="message4">未来在贵公司走向人生巅峰</div>
            <div class="time">
                <div class="line"></div>
                <div class="point"></div>
                <div class="line"></div>
                <div class="point"></div>
                <div class="line"></div>
                <div class="point"></div>
                <div class="line"></div>
                <div class="point"></div>
                <div class="line"></div>

            </div>
        </div>
        <!--第三屏-->
        <div class="swiper-slide slide3">
            <div class="tittle">
                <h2>专项技能</h2>
            </div>
            <div class="skills">
                <div class="c3">精通css3+html5网页开发</div>
                <div class="bar">
                    <div class="bar1"><p>css3+html5</p></div>
                </div>
                <div class="boo">熟悉bootstrap，开发响应式网站开发，并兼容多个终端</div>
                <div class="bar">
                    <div class="bar2"><p>bootstrap</p></div>
                </div>
                <div class="aj">熟悉ajax，能够通过xml，jsonp进行数据交互</div>
                <div class="bar">
                    <div class="bar3"><p>ajax</p></div>
                </div>
                <div class="aj">了解流行框架angular的使用</div>
                <div class="bar">
                    <div class="bar4"><p>angular</p></div>
                </div>
            </div>
            <div class="box">
                <div class="js">
                    <img src="images/js.png"  width="100%" alt=""/>
                </div>
                <div class="jq">
                    <img src="images/h5.jpg"  width="100%" alt=""/>

                </div>
                <div class="h5">
                    <img src="images/jq.jpg"  width="100%" alt=""/>
                </div>
                <div class="boot">
                    <img src="images/boot.png"  width="100%" alt=""/>
                </div>
            </div>
        </div>
        <!--第四屏-->
        <div class="swiper-slide slide4">
            <div class="first">
                <h4>公司官网项目</h4>
                <span>1.DIV+CSS页面传统布局；</span>
                <span>2.css3完成一些页面的简单动画</span>
                <span>4.运用 JQuery对页面DOM进行操作实现页面基本效果；</span>
                <span>5.使用Ajax技术读取后台数据，完成页面数据的渲染。</span>
            </div>
            <div class="second">
                <h4>个人响应式项目</h4>
                <span>1.h5+CSS3页面布局；</span>
                <span>2.css3完成一些页面的简单动画</span>
                <span>3.使用bootstrap进行响应式开发布局。</span>
                <span>4.5.使用Ajax 进行数据交互，模拟数据，实现网站注册，登录功能模块。</span>
            </div>
        </div>
        <div class="swiper-slide slide5">
            <div>
                <div class="c1">
                    <img src="images/tittle2.png" alt=""/>
                </div>
                <div class="c2">
                    <img  src="images/c1.png" alt=""/>
                </div>
                <div class="c3">
                    <img  src="images/c2.png" alt=""/>
                </div>
                <div class="c4">
                    <img  src="images/c3.png" alt=""/>
                </div>
                <div class="c5">
                    <img  src="images/c4.png" alt=""/>
                </div>
                <div class="c6">
                    <img  src="images/c5.png" alt=""/>
                </div>
                <div class="c7">
                    <img  src="images/c6.png" alt=""/>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-button-next btn"></div>
</div>
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical',
        nextButton:'.swiper-button-next',
        onTransitionEnd: function(swiper){
            $('.swiper-slide-active').addClass('active');
        }
    });
</script>
</body>
</html>